
<!DOCTYPE html>
<html lang="zh-CN ">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>micro coder || 一枚技术宅</title>
    <meta name="author" content="micro coder">
    <meta name="description" content="一篇简单的技术博客 ">
    <meta name="keywords" content=" ">
    <link rel="icon" href="/images/headPhoto.jpg">
    <link rel="stylesheet" href="/css/antd.min.css">
    
    <link rel="stylesheet" href="/css/night-theme.css">
    
    <script src="/js/vue.js"></script>
    <script src="/js/antd.min.js"></script>
<meta name="generator" content="Hexo 6.3.0"></head>

<body>

    <div id="loading"
        style="height: 100vh; width: 100%; position: fixed;display: flex;z-index: 200; justify-content: space-between;">
        <div id="loadleft" style="width: 50%;background-color: #ffffff;transition: width 0.6s ease-out;"></div>
        <div id="loadright" style="width: 50%;background-color: #ffffff;transition: width 0.6s ease-out;"></div>
        <div
            style="position: fixed; height: 100vh; width: 100%;display: flex;justify-content: center;align-items: center;">
            <div id="loadcontent"
                style="width:400px;height:400px;padding:50px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:solid 10px#a3ddfb; text-align:center;opacity:1;transition:opacity 0.3s ease-out;">
                <div>
                    <h2>LOADING...</h2>
                    <p>加载过慢请开启缓存(浏览器默认开启)</p>
                    <div>
                        <img src="/dancingkitty.gif" alt="loading">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="layout">
        <transition name="into">
            <div v-show="show_page" style="display: none;">
                <div id="menu_show">
                     
<nav id="menu">
    <div class="desktop-menu">
        <a href="/">
            <span class="title">micro coder</span>
        </a>
        
        <a href="/">
            <span>
                <a-icon type="home" theme="filled" />
            </span>
            <span>home</span>
        </a>
        
        <a href="/about">
            <span>
                <a-icon type="idcard" theme="filled" />
            </span>
            <span>about</span>
        </a>
        
        <a href="/archives">
            <span>
                <a-icon type="folder" theme="filled" />
            </span>
            <span>archives</span>
        </a>
        
        <a href="/like/categories">
            <span>
                <a-icon type="book" theme="filled" />
            </span>
            <span>categories</span>
        </a>
        
        <a href="/like/tags">
            <span>
                <a-icon type="tags" theme="filled" />
            </span>
            <span>tags</span>
        </a>
        
        <a target="_blank" rel="noopener" href="https://en.korilin.com">
            <span>
                <a-icon type="compass" theme="filled" />
            </span>
            <span>英文博客</span>
        </a>
        
    </div>

    <div :class="'phone-menu ' + menu_show" id="phone-menu">
        <div :class="'title'" @click="menu_show=!menu_show">
            <span style="margin-right: 10px;">
                <a-icon type="appstore" theme="filled" />
            </span>
            <span>micro coder</span>
        </div>
        <div class="items" v-show="menu_show">
            
            <a href="/">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="home" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">home</div>
                </div>
            </a>
            
            <a href="/about">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="idcard" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">about</div>
                </div>
            </a>
            
            <a href="/archives">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="folder" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">archives</div>
                </div>
            </a>
            
            <a href="/like/categories">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="book" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">categories</div>
                </div>
            </a>
            
            <a href="/like/tags">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="tags" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">tags</div>
                </div>
            </a>
            
            <a target="_blank" rel="noopener" href="https://en.korilin.com">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="compass" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">英文博客</div>
                </div>
            </a>
            
        </div>
        <div class="curtain" v-show="menu_show"></div>
    </div>

</nav>
                </div>

                <div id="main">
                    
<div id="archives">
    
    <a-timeline>
        <a-timeline-item timestamp="2023/7/30" placement="top" color="#a5c2f5">
            <a-card hoverable>
                <div class="item-time">2023/7/30</div>
                <a href="/2023/07/30/前言/">
                    <h3>前言</h3>
                </a>
                <div class="info">
                    

                    
                </div>
            </a-card>
        </a-timeline-item>
    </a-timeline>
    
    <a-timeline>
        <a-timeline-item timestamp="2023/7/30" placement="top" color="#a5c2f5">
            <a-card hoverable>
                <div class="item-time">2023/7/30</div>
                <a href="/2023/07/30/hello-world/">
                    <h3>Hello World</h3>
                </a>
                <div class="info">
                    

                    
                </div>
            </a-card>
        </a-timeline-item>
    </a-timeline>
    
</div>

                     
<footer id="footer">
    <div class="footer-wrap">
        <div>
            © 2023 - 2023 micro coder
            <span class="footer-icon">
                <a-icon type="flag" theme="filled" /></span>
            @micro coder
        </div>
        <div></div>
        <div>Based on the <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo Engine</a> & <a
                target="_blank" rel="noopener" href="https://github.com/korilin/hexo-theme-particle">Particle Theme</a></div>
        
    </div>

</footer>

<script src="/js/highlight.min.js"></script>
<script src="/js/particle.js"></script>
                </div>
            </div>
        </transition>
    </div>

    <script>
    new Vue({
        el: "#layout",
        data: {
            show_page: false,
            onload_menu: false,
            menu_show: false,
            card_top: 100
        },
        created: function () {
            var that = this
            window.onload = function () {
                that.show_page = true
                document.getElementById("loadcontent").style.opacity = 0
                setTimeout(function () {
                    document.getElementById("loadleft").style.width = 0
                    document.getElementById("loadright").style.width = 0
                }, 300)
                setTimeout(function () {
                    document.getElementById("loading").style = "display:none"
                }, 600)
            }
        },
        mounted: function () {
            var that = this
            window.addEventListener('scroll', function (e) {
                that.menu_show = false
            })
        },
        methods: {
            home_click: function () {
                window.scrollTo({
                    top: window.innerHeight - 80,
                    behavior: "smooth",
                });
            }
        }
    })
</script>

</body>

</html>